<template>
  <div class="lg-steps">
    <div class="lg-steps-line"></div>
    <div 
      class="lg-step"
      v-for="index in count"
      :key="index"
      :style="{ color: active >= index ? activeColor : defaultColor }"
    >
      {{ index }}
    </div>
  </div>
</template>
<script>
import './index.css'
export default {
  name: 'LgSteps',
  props: {
    count:{
      type: Number,
      default: 4
    },
    active: {
      type: Number,
      default: 2
    },
    defaultColor: {
      type: String,
      default: 'gray'
    },
    activeColor: {
      type: String,
      default: 'green'
    },
  }
}
</script>